<template>
  <div class="box">
    <h2>组件间通信6: $attrs与$listeners</h2>
    <p>需求: 自定义带Hover提示的按钮</p>
    <HintButton title="添加用户"  icon="el-icon-plus" type="primary" circle @click="addUser"/>
    <HintButton title="修改用户"  icon="el-icon-edit" type="success" circle @click="changeUser"/>
    <HintButton title="删除用户" icon="el-icon-delete" type="danger" round/>
    <HintButton title="双击用户" icon="el-icon-thumb" type="warnin" @dblclick.native="dblAdd"/>
  </div>
</template>
<script type="text/ecmascript-6">
import HintButton from './HintButton'
  export default {
    name: 'AttrsListenersTest',
    components:{HintButton},
    methods: {
      addUser(){
        alert('添加用户')
      },
      changeUser(){
        alert('修改用户')
      },
      dblAdd(){
        alert('双击添加用户')
      }
    },
  }
</script>
